/**
* 机型
*/
<template>
    <vp-dialog ref="templateDialogRef" :span="2">
        <template #title>
            <vp-label zh="选择" en="Select" />
        </template>
        <vp-main-page @refresh="loadDataList">
            <template #search>
                <el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
                    label-width="120px">
                    <vp-search-row :show-more="showMore">
                        <vp-search-col>
                            <el-form-item prop="jx">
                                <template #label><vp-label zh="机型" en="Keyword" /></template>
                                <el-input v-model="searchForm.jx" v-trim></el-input>
                            </el-form-item>
                        </vp-search-col>
                        <vp-search-col>
                            <el-form-item prop="lx">
                                <template #label><vp-label zh="类型" en="Status" /></template>
                                <el-select v-model="searchForm.lx" placeholder="请选择" clearable>
                                    <el-option label="固定翼" value="10"></el-option>
                                    <el-option label="旋翼" value="20"></el-option>
                                </el-select>
                            </el-form-item>
                        </vp-search-col>
                        <vp-search-col btn-col>
                            <vp-btn-search :loading="loading" @click="loadDataList" />
                            <vp-btn-reset @click="handleSearchReset" />
                            <vp-btn-more @change="showMore = $event" />
                        </vp-search-col>
                    </vp-search-row>
                </el-form>
            </template>

            <template #table>
                <vp-table ref="multipleTable" :data="tableData" row-key="id" v-loading="loading"
                    @selection-change="handleSelectionChange"
                    @row-click="handleRowClick" max-height="400" stripe border highlight-current-row>
                    <el-table-column type="selection" :reserve-selection="true" align="center" width="55" />
                    <el-table-column type="index" align="center" label="#">
                    </el-table-column>
                    <el-table-column prop="jx" width="130" sortable="custom" show-overflow-tooltip>
                        <template #header><vp-label zh="机型" en="A/C Type" /></template>
                    </el-table-column>
                    <el-table-column prop="lx" min-width="100" sortable="custom" show-overflow-tooltip>
                        <template #header><vp-label zh="审核类别" en="Audit Cat." /></template>
                        <template #default="{ row }">
                            <el-tag v-if="row.lx === 10" type="success">固定翼</el-tag>
                            <el-tag v-else type="danger">旋翼</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="xh" width="130" show-overflow-tooltip>
                        <template #header><vp-label zh="型号" en="Auditor Leader" /></template>
                    </el-table-column>
                    <el-table-column prop="zzjx" width="130" show-overflow-tooltip>
                        <template #header><vp-label zh="执照机型" en="Auditor Leader" /></template>
                    </el-table-column>
                    <el-table-column prop="sccj" width="130" show-overflow-tooltip>
                        <template #header><vp-label zh="生产厂家" en="Auditor Leader" /></template>
                    </el-table-column>
                </vp-table>
            </template>

            <div style="float: right;padding-top: 8px;padding-bottom: 8px;">
                <el-popover placement="top-end" :width="400" trigger="click">
                    <template #reference>
                        <el-badge :value="multipleSelection.length" type="info">
                            <vp-btn-selected></vp-btn-selected>
                        </el-badge>
                    </template>
                    <el-table :data="multipleSelection" border stripe max-height="500" row-key="id">
                        <el-table-column prop="jx">
                            <template #header><vp-label zh="机型" en="Plan" /></template>
                        </el-table-column>
                        <el-table-column width="90">
                            <template #header><vp-label-operations /></template>
                            <template #default="{ row }">
                                <vp-btn-del text @click="handleSelectedDelete(row)" />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-popover>
            </div>
        </vp-main-page>
        <template #footer>
            <vp-btn-confirm @click="handleSave" />
        </template>
    </vp-dialog>
</template>
<script setup lang="ts" name="basedataModelMultDialog">
import { ref, onMounted, reactive } from 'vue';
import request from '/@/utils/request';
const emits = defineEmits(['confirm']);


const tableData = ref([]);
const loading = ref(false);
const showMore = ref(false);


const searchForm = reactive({
    zt: "10",
    lx: "",
    jx: "",
    allData: true,
});


const loadDataList = () => {
    loading.value = true;
    request.get('/basicData/acmodel/list', {
        params: {
            ...searchForm
        }
    }).then(res => {
        tableData.value = res?.data || []
    }).finally(() => {
        loading.value = false;
    })
};
const multipleSelection = ref([]);

const handleOpen = () => {
    templateDialogRef.value.handleOpen();
    multipleSelection.value = [];
    loadDataList();
}

//选择的数据
const multipleTable = ref();

const handleSelectionChange = (val: any) => {
    multipleSelection.value = val;
}
const handleRowClick = (row: any) => {
    multipleTable.value.toggleRowSelection(row);
}

const handleSelectedDelete = (row: any) => {
    multipleTable.value.toggleRowSelection(row, false);
}


// 组件挂载后事件
onMounted(() => {
    loadDataList()
})

const handleSearchReset = () => {
    searchForm.zt = "10";
    searchForm.jx = "";
    searchForm.lx ="";
    loadDataList();
};

const templateDialogRef = ref();
const handleSave = () => {
    emits("confirm", multipleSelection.value);
    templateDialogRef.value.handleClose();
    return;
};

defineExpose({
    handleOpen,
})
</script>